<!--
 * @Author: your name
 * @Date: 2021-04-15 14:42:57
 * @LastEditTime: 2021-07-27 15:00:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\todoOrder\orderList.vue
-->
<template>
  <page-layout title="工单列表">
    <div style="background: #fff;padding:0 24px">
      <a-row type="flex">
        <a-col :span="4">
          <a-menu style="width: 180px; height: 900px" :default-selected-keys="['own_wait']" mode="inline" @click="handleClick">
            <a-menu-item-group key="g1">
              <a-menu-item key="own_wait">待我处理</a-menu-item>
              <a-menu-item key="own_collect">
                我收藏的
              </a-menu-item>
              <a-menu-item key="own_finish">
                我完成的
              </a-menu-item>
            </a-menu-item-group>
            <!-- <a-sub-menu>
                            <span slot="title">我的团队</span>
                            <a-menu-item-group key="g2">
                                <a-menu-item key="4">待处理的</a-menu-item>
                                <a-menu-item key="5">已完结</a-menu-item>
                            </a-menu-item-group>
                        </a-sub-menu> -->
          </a-menu>
        </a-col>
        <a-col :span="20">
          <a-radio-group :value="pageListState.taskGroup" @change="onToDoType" style="margin: 0 0 16px 0">
            <span>类型：</span>
            <a-radio-button v-for="item in waitTypeList" :key="item.type" :value="item.type">
              {{ item.txt }}
              <span v-if="pageListState.queryType == 'own_wait'">({{ item.count }})</span>
            </a-radio-button>
          </a-radio-group>
          <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
            <a-form-model-item label="关键字">
              <a-input v-model="pageListState.keyword" placeholder="请输入姓名/身份证号" allow-clear>
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item label="待办类型" v-if="pageListState.taskGroup != 'paid_in' && pageListState.taskGroup != 'salary_tax' && pageListState.taskGroup != 'advance'">
              <a-select v-model="pageListState.taskType" style="width: 160px" placeholder="请选择待办类型" allow-clear>
                <a-select-option :value="key" v-for="(value, key) in toDoType" :key="key">{{ value }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="项目名称" v-if="pageListState.taskGroup != 'paid_in' && pageListState.taskGroup != 'salary_tax' && pageListState.taskGroup != 'advance'" prop="type">
              <a-select show-search :filter-option="false" style="width: 160px" v-model="pageListState.projectId" placeholder="请输入项目名称" @search="onSearchProject" @change="onChangeProject" allow-clear>
                <a-select-option v-for="item in project" :key="item.projectId">{{ item.projectName }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="异常类型" v-if="pageListState.taskGroup == 'error'">
              <a-select v-model="pageListState.errorType" style="width: 160px" placeholder="请选择异常类型" allow-clear>
                <a-select-option :value="key" v-for="(value, key) in taskErrorType" :key="key">{{ value }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="申诉类型" v-if="pageListState.taskGroup == 'shensu'">
              <a-select v-model="pageListState.complaintType" style="width: 160px" placeholder="请选择申诉类型" allow-clear>
                <!-- <a-select-option value="1">选项一</a-select-option> -->
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="提交日期" v-if="pageListState.taskGroup != 'paid_in' && pageListState.taskGroup != 'advance' && pageListState.taskGroup != 'salary_tax' && pageListState.taskGroup != 'shensu'">
              <a-date-picker :value="pageListState.commitDate ? moment(pageListState.commitDate, 'YYYY-MM-DD') : ''" @change="onChangeDate" placeholder="请选择提交日期" />
            </a-form-model-item>
            <a-form-model-item label="日期" v-if="pageListState.taskGroup == 'salary_tax'">
              <a-month-picker :value="pageListState.salary_month ? moment(pageListState.salary_month, 'YYYY-MM') : ''" @change="onChangeMonth" placeholder="请选择月份" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" icon="search" :disabled="!pageListState.taskGroup?true:false" @click="onSearch">查询</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-space :size="14" style="margin-bottom: 20px" v-if="pageListState.taskGroup">
            <a-button @click="onTransfer" icon="file-add" :disabled="selectedRowKeys.length?false:true">转交</a-button>
            <a-button icon="upload" :loading="exportLoading" @click="onExport" v-if="['add_cut','make_up','adjusted_basis'].includes(pageListState.taskGroup)">导出</a-button>
            <a-button type="primary" icon="download" @click="onImportIncreased(0)" v-if="pageListState.taskGroup == 'add_cut'">批量导入增减员处理结果</a-button>
            <a-button type="primary" icon="download" @click="onImportIncreased(1)" v-if="pageListState.taskGroup == 'make_up'">批量导入补缴处理结果</a-button>
            <a-button type="primary" icon="download" @click="onImportIncreased(2)" v-if="pageListState.taskGroup == 'adjusted_basis'">批量导入调基处理结果</a-button>
            <!-- <a-button type="primary" icon="user" v-if="pageListState.taskGroup == 'error'">邀请雇员完善资料</a-button> -->
            <!-- <a-radio-group :value="salaryIndex" @change="onSalaryType" v-if="pageListState.taskGroup == 'salary_tax'">
              <a-radio-button v-for="(item, index) in noteList1" :key="item" :value="index">{{ item }}({{ 1 }})</a-radio-button>
            </a-radio-group> -->
          </a-space>
          <a-table v-if="dataSource.length" rowKey="id" :columns="tableColumns" :data-source="dataSource" :scroll="{ x: true }" :row-selection="{
                            selectedRowKeys: selectedRowKeys,
                            onChange: onSelectChange,
                        }" :pagination="{
                            current: pageListState.pageNum,
                            pageSize: pageListState.pageSize,
                            total: total,
                            onChange: onPageChange,
                            onShowSizeChange: onSizeChange,
                        }" style="background: #fff">
            <template slot="billGenDay" slot-scope="text" v-if="text">每月{{ text }}号</template>
            <template slot="operation" slot-scope="text, record">
              <a class="ant-dropdown-link" @click="onDeal(record)">去处理</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <!-- 转交 -->
      <transferModal :transferModal="transferModal" @cancelModal="onCancelModal"></transferModal>
      <!-- 批量导入 -->
      <a-modal :visible="resultModal" :afterClose="onAfterClose" title="批量导入" ok-text="下一步" @ok="onNext" @cancel="handleCancel" width="960px" :bodyStyle="{ height: '626px' }">
        <a-steps class="steps" :current="current">
          <a-step title="上传文件" description="导入数据" />
          <a-step title="执行导入" description="数据导入至服务器" />
          <a-step title="导入成功" description="完成数据批量导入" />
        </a-steps>
        <div class="content">
          <steps1 v-if="current === 1" @fileUrl="onFileUrl" @remove-file="onRemoveFile" :resultModal="resultModal">
            <!-- 批量导入增减员 -->
            <template slot="official" v-if="importModalIndex==0">
              <h3 style="font-weight: 550; margin-bottom: 20px">1. 在调基待办列表页导出调基待办：在excel中维护处理状态</h3>
              <h3 style="font-weight: 550; margin-bottom: 20px">2. 批量导入后：系统根据待办号更新处理状态</h3>
            </template>
            <!-- 批量导入补缴 -->
            <template slot="official" v-if="importModalIndex==1">
              <h3 style="font-weight: 550; margin-bottom: 20px">1. 在补缴待办列表页导出补缴待办：在excel中维护处理状态</h3>
              <h3 style="font-weight: 550; margin-bottom: 20px">2. 批量导入后：系统根据待办号更新处理状态</h3>
            </template>
            <!-- 批量导入调基 -->
            <template slot="official" v-if="importModalIndex==2">
              <h3 style="font-weight: 550; margin-bottom: 20px">1. 在调基待办列表页导出调基待办：在excel中维护处理状态</h3>
              <h3 style="font-weight: 550; margin-bottom: 20px">2. 批量导入后：系统根据待办号更新处理状态</h3>
            </template>
          </steps1>
          <steps2 v-if="current === 2" @importSuccess="onImportSuccess"></steps2>
          <steps3 v-if="current === 3" :fileUrl="fileUrl" :unAbnormalTotal="unAbnormalTotal" :abnormalTotal="abnormalTotal"></steps3>
        </div>
        <template slot="footer" v-if="current == 3">
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="onImport">
            继续导入
          </a-button>
          <a-button type="primary" @click="onStepSure">
            确定
          </a-button>
        </template>
      </a-modal>
      <!-- 详情drawer -->
      <drawer :title="detailTitle" ref="drawer" :visible.sync="detailDrawer" @getList="getList">
        <orderDetail slot="content" :id="nowToDoItemId" :taskType="pageListState.taskGroup" :leftType="this.pageListState.queryType" :taskErrorType="taskErrorType"></orderDetail>
      </drawer>
    </div>
  </page-layout>
</template>

<script>
import steps1 from '@/pages/components/increasedWorkers/steps/steps1';
import steps2 from '@/pages/components/increasedWorkers/steps/steps2';
import steps3 from '@/pages/components/increasedWorkers/steps/steps3';
import transferModal from './modal/transferModal';
import PageLayout from '@/layouts/PageLayout';
import moment from 'moment';
import Drawer from '@/pages/components/drawer'
import orderDetail from './orderDetail';
import {
  getProjectSelectList, getTaxList, getShiJiaoList, getPageList, getToDoOrderSum, getSelectList, getTransfer, getAddCutExport, getAdjustBasisExport, getMakeUpExport, getBillList, getAdjustImports,
  getMakeupImports, getAddCutImport
} from '@/services/todo.js';
import datas from '@/utils/data';
export default {
  name: 'orderList',
  components: { PageLayout, transferModal, steps1, steps2, steps3, orderDetail, Drawer },
  data () {
    return {
      pageListState: {
        keyword: '', // 姓名/身份证/企业名称/项目名称
        taskType: undefined, // 代办类型
        errorType: undefined, // 异常类型
        projectId: undefined, // 项目ID
        commitDate: '', // 提交日期
        salary_month: "", // 薪税月份
        complaintType: undefined, // 申诉类型
        taskGroup: '',  // 待办类型tabs
        queryType: 'own_wait', // 导航类型
        pageNum: 1,
        pageSize: 10,
      },
      detailDrawer: false,
      taskType: {},
      exportLoading: false,
      taskErrorType: {},
      project: [],
      nowToDoItemId: '',
      transferUserId: '',
      basicInfo: [],
      attaInfo: [],
      fileUrl: '',
      unAbnormalTotal: '',
      abnormalTotal: '',
      failFileUrl: null,
      salaryIndex: 0,
      noteList1: ['待导入', '算税中', '待锁定', '已锁定', '已缴纳'],
      total: 0,
      // 增减员
      increasedWorkersColumns: datas.increasedWorkersColumns,
      // 社保公积金异常
      socialSecurityFundAbnormalColumns: datas.socialSecurityFundAbnormalColumns,
      // 社保公积金实缴请款
      socialSecurityFundPaymentColumns: datas.socialSecurityFundPaymentColumns,
      // 社保公积金预收账单计算
      socialSecurityFundAdvanceColumns: datas.socialSecurityFundAdvanceColumns,
      // 补缴
      supplementaryPaymentColumns: datas.supplementaryPaymentColumns,
      // 调基
      adjustableBaseColumns: datas.adjustableBaseColumns,
      // 薪资请款
      PayTaxColumns: datas.PayTaxColumns,
      // 员工申诉
      employeeComplaintColumns: datas.employeeComplaintColumns,
      dataSource: [],
      selectedRowKeys: [],
      waitTypeList: [],
      transferModal: false,
      resultModal: false,
      current: 1,
      importModalIndex: 0
    };
  },
  computed: {
    detailTitle () {
      return ['增减员详情', '社保公积金异常详情', '社保公积金实缴请款详情', '社保公积金预收账单计算详情', '补缴详情', '调基详情', '薪资请款详情', '员工申诉详情'][
        ['add_cut', 'error', 'paid_in', 'advance', 'make_up', 'adjusted_basis', 'salary_tax', 'shensu'].findIndex(item => item == this.pageListState.taskGroup)
      ];
    },
    tableColumns () {
      return [this.increasedWorkersColumns, this.socialSecurityFundAbnormalColumns, this.socialSecurityFundPaymentColumns, this.socialSecurityFundAdvanceColumns, this.supplementaryPaymentColumns, this.adjustableBaseColumns, this.PayTaxColumns, this.employeeComplaintColumns][
        ['add_cut', 'error', 'paid_in', 'advance', 'make_up', 'adjusted_basis', 'salary_tax', 'shensu'].findIndex(item => item == this.pageListState.taskGroup)
      ];
    },
    toDoType () {
      return this.pageListState.taskGroup == 'add_cut' ? this.taskType.addCut : this.pageListState.taskGroup == 'error' ? this.taskType.error : this.pageListState.taskGroup == 'make_up' ? this.taskType.makeUp : this.pageListState.taskGroup == 'adjusted_basis' ? this.taskType.adjustBasis : this.pageListState.taskGroup == 'paid_in' ? this.taskType.paidIn : this.pageListState.taskGroup == 'advance' ? this.taskType.advance : this.pageListState.taskGroup == 'salary_tax' ? this.taskType.salaryTax : ''
    }
  },
  methods: {
    moment,
    /**
     * @description: 工单列表
     * @param {*}
     * @return {*}
     */
    orderPageList () {
      if (this.pageListState.taskGroup == 'advance') {
        this.getBillList(this.pageListState);
      } else if (this.pageListState.taskGroup == 'paid_in') {
        this.getShiJiaoList(this.pageListState);
      } else if (this.pageListState.taskGroup == 'salary_tax') {
        this.getTaxList(this.pageListState);
      } else {
        this.getPageList(this.pageListState);
      }
    },
    onAfterClose () {
      this.current = 1;
    },
    onRemoveFile () {
      this.fileUrl = ''
    },
    onSalaryType (e) {
      this.salaryIndex = e.target.value;
    },
    onNext () {
      if (!this.fileUrl) {
        this.$message.warning('请选择上传文件！');
        return;
      }
      if (this.current == 1) {
        const params = { fileUrl: this.fileUrl };
        if (this.pageListState.taskGroup == 'add_cut') {
          this.getAddCutImport(params)
        } else if (this.pageListState.taskGroup == 'make_up') {
          this.getMakeupImports(params);
        } else if (this.pageListState.taskGroup == 'adjusted_basis') {
          this.getAdjustImports(params);
        }
      }
      this.current = this.current + 1;
    },
    onImportSuccess () {
      this.current = 2;
    },
    onStepSure () {
      this.current = 3;
      this.resultModal = false
      this.getToDoOrderSum({ queryType: this.pageListState.queryType });
      this.orderPageList();
    },
    onImport () {
      this.current = 1;
    },
    getList (data) {
      const bool = ['add_cut', 'error', 'paid_in', 'advance', 'make_up', 'adjusted_basis', 'salary_tax', 'shensu'].includes(data)
      if (bool) {
        this.pageListState.taskGroup = data;
      }
      this.getToDoOrderSum({ queryType: this.pageListState.queryType });
      this.orderPageList();
    },
    handleClick (e) {
      this.pageListState.queryType = e.key;
      this.getToDoOrderSum({ queryType: this.pageListState.queryType });
      if (!this.pageListState.taskGroup) {
        return;
      }
      this.orderPageList();
    },
    onToDoType (e) {
      this.dataSource = [];
      this.pageListState.taskGroup = e.target.value;
      this.orderPageList()
    },
    onChangeDate (date, dateString) {
      this.pageListState.commitDate = dateString;
    },
    onChangeMonth (date, dateString) {
      this.pageListState.salary_month = dateString;
    },
    onDeal (item) {
      this.detailDrawer = true;
      this.nowToDoItemId = item.id;
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onSearch () {
      if (this.pageListState.taskGroup == 'add_cut') {
        this.pageListState.errorType = '';
      }
      this.getToDoOrderSum({ queryType: this.pageListState.queryType });
      this.orderPageList()
    },
    onTransfer () {
      this.transferModal = true;
    },
    onExport () {
      this.exportLoading = true;
      const params = {
        keyword: this.pageListState.keyword,
        taskType: this.pageListState.taskType,
        projectId: this.projectId,
        commitDate: this.pageListState.commitDate,
        queryType: this.pageListState.queryType,
      };
      if (this.pageListState.taskGroup == 'add_cut') {
        let _params = { ...this.pageListState, 'token': this.$Storage.get('token') }
        this.getAddCutExport(_params);
      } else if (this.pageListState.taskGroup == 'make_up') {
        this.getMakeUpExport(params);
      } else {
        this.getAdjustBasisExport(params);
      }
    },
    onImportIncreased (i) {
      this.importModalIndex = i;
      this.fileUrl = '';
      this.resultModal = true;
    },
    onCancelModal (result) {
      let { modal, str, data } = result;
      if (modal == '转交') {
        if (str == 'ok') {
          this.transferUserId = data;
          const params = {
            taskIds: this.selectedRowKeys,
            userId: this.transferUserId,
          };
          this.getTransfer(params);
        }
        this.transferModal = false;
      }
    },
    handleCancel () {
      this.resultModal = false;
      this.current = 1;
      this.fileUrl = '';
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.pageListState.pageNum = page;
      this.pageListState.pageSize = pageSize;
      this.orderPageList()
    },
    onSizeChange (current, size) {
      this.pageListState.pageNum = 1;
      this.pageListState.pageSize = size;
      this.orderPageList()
    },
    /**
     * @description:  分页列表
     * @param {*}
     * @return {*}
     */
    getPageList (params) {
      getPageList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 代办类型统计
     * @param {*} params
     * @return {*}
     */
    getToDoOrderSum (params) {
      getToDoOrderSum(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          // 数据为空时置空状态数组和状态
          if (!data || !data.length) {
            this.waitTypeList = [];
            this.pageListState.taskGroup = ''
            return;
          }
          // 状态数组处理
          data.forEach(val => val.txt = ['增减员', '社保公积金异常', '社保公积金实缴请款', '社保公积金预收账单计算', '补缴', '调基', '薪税请款', '申诉'][['add_cut', 'error', 'paid_in', 'advance', 'make_up', 'adjusted_basis', 'salary_tax', 'shensu'].findIndex(item => item == val.type)]);
          this.waitTypeList = data;
          if (!this.pageListState.taskGroup) {
            this.pageListState.taskGroup = data[0].type;
          }
          this.orderPageList()
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 代办类型列表/异常类型列表
     * @param {*}
     * @return {*}
     */
    getSelectList () {
      getSelectList().then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.taskType = data.workType
          this.taskErrorType = data.taskErrorType;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 项目下拉列表
     * @param {*}
     * @return {*}
     */
    getProjectSelectList (params) {
      getProjectSelectList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.project = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSearchProject (value) {
      if (value.length >= 2) {
        this.getProjectSelectList({ projectName: value });
      }
    },
    onChangeProject (val) {
      this.pageListState.projectId = val;
    },
    /**
     * @description: 转交人员
     * @param {*}
     * @return {*}
     */
    getTransfer (params) {
      getTransfer(params).then(res => {
        let { code, msg } = res.data;
        if (code == 200) {
          this.getToDoOrderSum({ queryType: this.pageListState.queryType });
          this.orderPageList()
          this.$message.success('转交成功！');
          this.selectedRowKeys = []
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 增减员导出
     * @param {*}
     * @return {*}
     */
    getAddCutExport (params) {
      getAddCutExport(params).then(res => {
        this.exportLoading = false;
      });
    },
    /**
     * @description: 调基导出
     * @param {*}
     * @return {*}
     */
    getAdjustBasisExport (params) {
      getAdjustBasisExport(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.exportLoading = false;
          window.location.href = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 补缴导出
     * @param {*}
     * @return {*}
     */
    getMakeUpExport (params) {
      getMakeUpExport(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.exportLoading = false;
          window.location.href = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onFileUrl (url) {
      this.fileUrl = url;
    },
    /**
     * @description: 预收列表
     * @param {*}
     * @return {*}
     */
    getBillList (params) {
      getBillList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 实缴列表
     * @param {*}
     * @return {*}
     */
    getShiJiaoList (params) {
      getShiJiaoList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 薪税列表
     * @param {*}
     * @return {*}
     */
    getTaxList (params) {
      getTaxList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 批量导入增减员
     * @param {*}
     * @return {*}
     */
    getAddCutImport (params) {
      getAddCutImport(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.unAbnormalTotal = data.total;
          this.abnormalTotal = data.fail;
          this.failFileUrl = data.failFileUrl;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 批量导入调基
     * @param {*}
     * @return {*}
     */
    getAdjustImports (params) {
      getAdjustImports(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.unAbnormalTotal = data.total;
          this.abnormalTotal = data.fail;
          this.failFileUrl = data.failFileUrl;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 批量导入补缴
     * @param {*}
     * @return {*}
     */
    getMakeupImports (params) {
      getMakeupImports(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.unAbnormalTotal = data.total;
          this.abnormalTotal = data.fail;
          this.failFileUrl = data.failFileUrl;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
  mounted () {
    const params = window.location.href.split('?')[1];
    if (params) {
      let id, type;
      if (params.includes('&')) {
        type = params.split('&')[0].split('=')[1]
        id = params.split('&')[1].split('=')[1]
      } else {
        type = params.split('=')[1]
      }
      if (id) {
        this.nowToDoItemId = id
        this.setShowDrawer(true)
      }
      this.pageListState.taskGroup = type ? type : '';
    }
    this.getToDoOrderSum({ queryType: this.pageListState.queryType });
    this.getSelectList();
  },
};
</script>

<style lang="less" scoped>
.ant-col.ant-col-4 {
  width: 180px;
}
.ant-col.ant-col-20 {
  padding: 24px;
  flex: 1;
}
</style>
